<template>
  <!--容器-->
  <div style="width: 100%;height: 100%; padding: 10px;align-content: center">
    <!--报表容器-->
    <div style="display: flex">
      <div id="main" style="width: 600px;height:400px;"></div>
      <div>
        <div id="main2" style="width: 600px;height:400px;"></div>
      </div>
    </div>
      <div id="main3" style="width: 100%;height:400px;"></div>
  </div>
</template>

<script>
//引入echarts
import * as echarts from 'echarts';
import request from "../../utils/request";
export default {
  name: "IncomeReport",
  data(){
    return{
      //支出占比数据
      chartDate: [],
      //折线图日期
      dataBox: {},
      //折线图时间数据
      timeData: [],
      //折线图对应数据
      valueData:[],
      //柱图排行榜姓名数据
      columnChartName: [],
      //柱图排行榜数据
      columnChartValue: []
    }
  },
  mounted() {
    this.initEcharts()
    this.ConsumptionLineChart()
    this.initIncomeColumnChart()
  },
  methods:{
    /*查询支出消费聚到占比*/
    findAllSpendingData() {
      request.get("/report/findAllIncomeData").then(res => {
        //查出数据
        this.chartDate = res.data;
        //重新加载数据
        this.initEcharts()
      })
    },
    initEcharts() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('main'));

      // 指定图表的配置项和数据
      let option = {
        title: {
          text: '*收入消费渠道占比',
          left: 'center'
        },
        toolbox: {
          show: true,
          feature: {
            mark: {show: true},
            dataView: {show: true, readonly: false},
            restore: {show: false},
            saveAsImage: {show: true}
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: 'vertical',
          left: 'left',
        },
        series: [
          {
            name: '使用次数/占比率',
            type: 'pie',
            radius: '55%',
            center: ['50%', '50%'],
            //联动数据
            data: this.chartDate,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },

    /*消费折线图*/
    ConsumptionLineChart() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('main2'));

      let option = {
        title: {
          text: '一周内收入趋势'
        },
        tooltip: {
          trigger: "axis",
          axisPointer:{
            type:'cross',
            label:{
              backgroundColor:'#6a7985'
            }
          }
        },
        toolbox: {
          show: true,
          feature: {
            mark: {show: true},
            dataView: {show: true, readonly: false},
            restore: {show: false},
            saveAsImage: {show: true}
          }
        },
        xAxis: {
          type: 'category',
          data: this.timeData
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.valueData,
            type: 'line'
          }
        ]
      };
      myChart.setOption(option)
    },
    /*查询折线图数据*/
    findDateByLine(){
      request.get("/report/findIncomeDateByLine").then(res=>{
        console.log(res)
        res.data.forEach(item=>{
          /*将值push到数据中*/
          this.valueData.push(item.price)
          this.timeData.push(item.createTime)
        })
        this.ConsumptionLineChart();
      })
    },
    /*初始化柱图*/
    initIncomeColumnChart(){
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('main3'));

      let option = {
        title:{
          text:'一周内收入总额前五'
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {
            return "姓名:" + params[0].name + "<br>" + "总额:" + ":" + params[0].data + "(元)"
          }
        },
        toolbox: {
          show: true,
          feature: {
            mark: {show: true},
            dataView: {show: true, readonly: false},
            restore: {show: false},
            saveAsImage: {show: true}
          }
        },
        xAxis: {
          type: 'category',
          data: this.columnChartName
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.columnChartValue,
            type: 'bar'
          }
        ]
      };
      myChart.setOption(option)
    },
    /*查询柱图数据*/
    findIncomeColumnChart(){
      request.get("/report/incomeColumnChart").then(res=>{
        res.data.forEach(item=>{
          this.columnChartValue.push(item.price)
          this.columnChartName.push(item.name)
        })
        this.initIncomeColumnChart()
      })
    }
  },
  created() {
    //加载执行查询方法
    this.findAllSpendingData();
    //加载查询折线图数据
    this.findDateByLine();
    //加载柱图数据
    this.findIncomeColumnChart()
  }
}
</script>

<style scoped>

</style>